<!--登录页-->
<template>
  <div style="height: 100vh;background-color:#fff;overflow: hidden">
    <el-container>
      <el-header style="height: 8vh;padding-top: 10px">
        <el-row :gutter="10">
          <el-col :span="6">
          </el-col>
          <el-col :span="10" style="position: relative">
            <img src="/logo/logo.png" style="height: 50px;position: absolute;float: left;display: block">
            <span style="color: #3398eb;font-weight: bold;position: absolute;float: left;font-size: 30px;display: block;margin-left: 90px">智游天下</span>
          </el-col>
          <el-col :span="8">
            <el-button type="text" plain style="font-size: 25px;margin-top: 10px" @click="router.push('/')"><el-icon><HomeFilled /></el-icon>首页</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="container">
        <el-row :gutter="40">
          <el-col :span="16">
          </el-col>
          <el-col :span="8">
            <el-card style="margin-top: 80px">
              <h3 style="text-align: center;">用户登录</h3>
              <el-form label-position="top">
                <el-form-item label="用户名">
                  <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input placeholder="请输入密码" show-password v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button style="width: 100%;" type="primary" @click="login">登录</el-button>
                </el-form-item>
              </el-form>
              <div style="text-align: center;color: #666;font-size: 14px;padding: 10px 0">
                没有账号？
                <el-link type="primary" @click="router.push('/register')">
                  立即注册
                </el-link>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer style="display: flex;flex-wrap: wrap;padding: 70px 300px;justify-content: space-evenly;">
          <TravelAgentView />
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
import TravelAgentView from "@/views/TravelAgentView.vue";
import qs from "qs";

const user = ref(
    {username:'',password:''}
);

const login = ()=>{
  console.log(user.value);
  let data = qs.stringify(user.value)
  //给后端发送登录请求
  axios.post(BASE_URL+'/v1/user/login',data)
      .then((response)=>{  //回调函数，服务器响应后执行此代码
        /*
           response是响应对象，我们可以从response.data中获取服务器给的响应数据
         */
        console.log(response);
        console.log(response.data);//{code:2000,msg:'OK',data:null}
        //根据状态码判断是否登录成功，进行不同的处理
        if(response.data.code==2000){ //登录成功
          ElMessage.success("登录成功!")
          //登录成功后，将后端返回的userVO对象保存到localStorage中
          localStorage.setItem('user',JSON.stringify(response.data.data));
          router.push('/') //跳转至http://localhost:9090后重定向到/user
        }else{ //登录失败
          ElMessage.error(response.data.msg);
          user.value = {}; //清空输入框
        }
      })
}
</script>

<style scoped>
.container {
  background-image: url('../../public/imgs/login5.jpg'); /* 图片路径 */
  background-size: cover; /* 背景图片大小调整方式 */
  background-position: center center; /* 背景图片位置 */
  background-repeat: no-repeat; /* 背景图片是否重复 */
  height: 60vh; /* 设置高度 */
}
</style>